<template>
  <div>
    <div class="button-group-css">
      <div class="button-group-search-css">
        <el-input placeholder="请输入账号" v-model="datas.username"></el-input>
        <el-input placeholder="请输入姓名" v-model="datas.name"></el-input>
        <el-input placeholder="请输入联系方式" v-model="datas.phone"></el-input>
        <el-button @click="dataLoad">搜索</el-button>
      </div>

      <div>
        <el-button type="success" @click="open_add_dialog()">
          添加账号
        </el-button>
      </div>
    </div>

    <div class="table-div-css">
      <el-table :data="datas.tableList" stripe style="width: 100%">
        <el-table-column prop="username" label="账号" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="phone" label="联系方式" />
        <el-table-column prop="level" label="用户等级">
          <template #default="scope">
            {{ datas.levelDic[scope.row.level + ""] }}
          </template>
        </el-table-column>

        <el-table-column prop="address" label="操作" width="180">
          <template #default="scope">
            <el-button type="primary" @click="open_put_dialog(scope.row)"
              >修改</el-button
            >

            <el-button type="danger" @click="del_func(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination-div-css">
      <el-pagination
        v-model:current-page="datas.page"
        v-model:page-size="datas.pagesize"
        :page-sizes="[100, 200, 300, 400]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="datas.total"
        @size-change="dataLoad"
        @current-change="dataLoad"
      />
    </div>
  </div>

  <el-dialog v-model="datas.dialogVisible" :title="datas.title">
    <el-form :model="form">
      <el-form-item label="登录账号:" :label-width="datas.formLabelWidth">
        <el-input
          v-model="form.username"
          autocomplete="off"
          :disabled="datas.title == '添加账号' ? false : true"
        />
      </el-form-item>
      <el-form-item label="密码:" :label-width="datas.formLabelWidth">
        <el-input v-model="form.password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="姓名:" :label-width="datas.formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="联系方式:" :label-width="datas.formLabelWidth">
        <el-input v-model="form.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="用户等级:" :label-width="datas.formLabelWidth">
        <el-select v-model="form.level" placeholder="请选择用户身份">
          <el-option label="普通用户" :value="1" />

          <el-option label="管理员" :value="10" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close_dialog">取消</el-button>

        <el-button
          v-if="datas.title == '添加账号'"
          type="primary"
          @click="add"
          :disabled="shake_obj.add"
          >添加</el-button
        >
        <el-button
          v-if="datas.title == '修改账号信息'"
          type="primary"
          @click="put"
          :disabled="shake_obj.put"
          >修改</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { onMounted, reactive } from "vue";
import {
  api_admin_userlist_get,
  api_admin_userlist_post,
  api_admin_userlist_put,
  api_admin_userlist_del,
} from "../../../api/api";

const datas = reactive({
  tableList: [],
  dialogVisible: false,
  formLabelWidth: "140px",
  title: "",
  page: 1,
  pagesize: 10,
  total: 0,
  username: "",
  name: "",
  phone: "",
  levelDic: {
    1: "普通用户",
    10: "管理员",
  },
});
const form = reactive({
  username: "",
  password: "",
  name: "",
  phone: "",
  level: 1,
});

const shake_obj = reactive({
  add: false,
  put: false,
});

const close_dialog = () => {
  //点击弹窗的取消按钮触发的方法
  datas.dialogVisible = false;
  form.username = "";
  form.password = "";
  form.name = "";
  form.phone = "";
  form.level = 1;
};

const open_add_dialog = () => {
  //添加添加账号触发的方法
  datas.title = "添加账号";

  form.username= ""
  form.password= ""
  form.name=""
  form.phone= ""
  form.level= 1

  datas.dialogVisible = true;
};
const open_put_dialog = (row) => {
  //点击修改触发的方法

  datas.title = "修改账号信息";
  form.username = row.username;
  form.password = row.password;
  form.name = row.name;
  form.phone = row.phone;
  form.level = row.level;
  datas.dialogVisible = true;
};

const add = () => {
  //向后端提交添加账号数据的方法

  if (shake_obj.add) {
    return;
  }
  shake_obj.add = true;
  setTimeout(() => {
    shake_obj.add = false;
  }, 1000);

  form.level = parseInt(form.level);
  api_admin_userlist_post(form).then((res) => {
    if (res.data.code == 200) {
      ElMessage({
        message: res.data.msg,
        type: "success",
      });
      dataLoad();
      close_dialog();
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};

const put = () => {
  //向后端提交修改数据的方法

  if (shake_obj.put) {
    return;
  }
  shake_obj.put = true;
  setTimeout(() => {
    shake_obj.put = false;
  }, 1000);

  api_admin_userlist_put(form).then((res) => {
    if (res.data.code == 200) {
      ElMessage({
        message: res.data.msg,
        type: "success",
      });
      dataLoad();
      close_dialog();
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};

const del_func = (row) => {
  //点击删除按钮触发的方法
  ElMessageBox.confirm(`确定删除这个账号:${row.username}吗?`, "提示", {
    confirmButtonText: "确定删除",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      let dic = {
        id: row.id,
      };
      api_admin_userlist_del(dic).then((res) => {
        if (res.data.code == 200) {
          ElMessage({
            message: res.data.msg,
            type: "success",
          });
          dataLoad();
        } else {
          ElMessage.error(res.data.msg);
        }
      });
    })
    .catch(() => {});
};


const dataLoad = () => {
  //数据加载
  let dic = {
    page: datas.page,
    pagesize: datas.pagesize,
    username: datas.username,
    name: datas.name,
    phone: datas.phone,
  };
  api_admin_userlist_get(dic).then((res) => {
    if (res.data.code == 200) {
      datas.tableList = res.data.data.data;
      datas.total = res.data.data.total;
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};

//页面初始加载数据
onMounted(() => {
  dataLoad();
});
</script>
<style scoped>
.button-group-css {
  display: flex;
  justify-content: space-between;
}

.button-group-search-css {
  display: flex;
}

.button-group-search-css > .el-input {
  margin-right: 0.25rem;
}

.table-div-css {
  height: 80vh;
  overflow: auto;
}

.pagination-div-css {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
